<template>
  <div class="page-container" v-loading="loading">
    <div class="page-content">
      <div class="panel-container">
        <el-form size="mini" label-width="120px">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="信息UUID:">
                <div class="item-content" v-if="detail">{{ detail.id }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拍卖名称:">
                <div class="item-content" v-if="detail">{{ detail.title }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属地区:">
                <div class="item-content" v-if="detail">{{ detail.address }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="信息介绍:">
                <div class="item-content tinymce-content" v-if="detail" v-html="detail.desc"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="fixed-container">
        <div class="fixed-content">
          <div class="panel-container">
            <div class="panel-line flex-center">
              <el-button type="info" @click="handleClose" size="mini">关闭</el-button>
              <el-button :loading="loading" type="primary" @click="handleNext" size="mini">查看下一条</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiInnerDetail, apiInnerEditGetNext } from '@/api/biddingNotice'

export default {
  name: 'InnerNoticeDetail',
  data() {
    return {
      loading: false,
      detail: null,
      tableQuery: '',
      viewerOptions: {
        button: true,
        navbar: false,
        title: true,
        toolbar: false,
        tooltip: false,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: true,
        transition: false,
        fullscreen: false,
        keyboard: true,
      },
      msgTypeList: [
        { label: '拍卖', value: 1 },
        { label: '招标', value: 2 },
      ],
      viewPowerList: [
        { label: '付费会员', value: 1 },
        { label: '注册会员', value: 2 },
      ],
      promiseUnitList: [
        { label: '万', value: 1 },
        { label: '元', value: 2 },
      ],
      evaluationList: [],
    }
  },
  computed: {},
  mounted() {
    this.queryId = this.$route.query.id
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      const tableQuery = window.localStorage.getItem('inner-notice-edit-table-query')
      if (tableQuery) {
        this.tableQuery = JSON.parse(tableQuery)
        this.tableQuery.position++
        this.tableQuery.is_next = 1
      } else {
        this.tableQuery = {}
        this.tableQuery.position = 1
        this.tableQuery.is_next = 1
      }
      this.getDetail()
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiInnerDetail({ id: this.queryId })
        .then((res) => {
          this.loading = false
          this.detail = res.data
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查看下一条
    handleNext() {
      this.loading = true
      apiInnerEditGetNext(this.tableQuery)
        .then((res) => {
          this.loading = false
          this.detail = res.data

          this.tableQuery.position++
        })
        .catch(() => {
          this.loading = false
        })
    },
    showMsg(list, val, labelName, valueName) {
      if (!this.detail || !list) {
        return
      }
      if (!labelName) {
        labelName = 'label'
      }
      if (!valueName) {
        valueName = 'value'
      }
      const item = list.find((item) => item[valueName] === val)
      if (item) {
        return item[labelName]
      } else {
        return ''
      }
    },
    // 关闭
    handleClose() {
      this.$bus.$emit('closeSelectedTag', this.$route)
    },
  },
}
</script>

<style scoped lang="scss">
@import url(~@/styles/tinymce.scss);
.img {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}
.panel-container {
  min-height: calc(100% - 10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
}
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  padding: 0 10px;
  z-index: 100;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 0;
  }
}
.page-content {
  padding-bottom: 40px;
}
</style>
